<!DOCTYPE html>
<html>

<head>
	<link rel="stylesheet" type="text/css" href="../test/css/test.css">
	<link rel="stylesheet" type="text/css" href="../../lib/jscountdown/jquery.countdown.css">
	<script type="text/javascript" src="../../lib/ckeditor/ckeditor.js"></script>
	<script type="text/javascript" src="../../lib/ckeditor/adapters/jquery.js"></script>
	<script type="text/javascript" src="../../lib/jstree/jquery.jstree.js"></script>
	<script type="text/javascript" src="../../modules/test/js/testcreationwizard.js"></script>
	<script type="text/javascript" src="../../lib/jscountdown/jquery.countdown.min.js"></script>


	<script>
		jQuery(document).ready(function(){
            initEditor();
			$("#step2").load("../test/create_test_choose_cat.html");
            $("#step3").load("../test/create_test_questions.html");
          });  

          function initEditor() {
            tinyMCE.init({
              mode : "textareas",
              theme : "advanced"
            });
          };
	</script>


	<script id="choose-categories-list" type="text/x-handlebars-template">
		{{#if categories}}
			<ul>
			{{#each categories}}
			<li data-type ="CATEGORY" data-name="{{name}}" data-id="{{id}}" {{#if amInterested}}class="jstree-checked"{{/if}} >
			<a>{{name}}</a>
			{{>choose-categories-recursion}}
			</li>
			{{/each}}
			</ul>
			{{/if}}
	</script>

	<script id="choose-categories-recursion-partial" type="text/x-handlebars-template">
		{{#if childCategories}}
			<ul>
			{{#each childCategories}}
			<li data-type ="CATEGORY" data-name="{{name}}" data-id="{{id}}" {{#if amInterested}}class="jstree-checked"{{/if}} >
			<a>{{name}}</a>
			{{>choose-categories-recursion}}
			</li>
			{{/each}}
			</ul>
			{{/if}}
	</script>
</head>

<body>
	<div class="row">
		<div id="wizard" class="wizard">
			<ul class="steps">
				<li data-target="#step1" class="active">
					<span class="badge badge-info">1</span>Overview
					<span class="chevron"></span>
				</li>
				<li data-target="#step2">
					<span class="badge badge-info">2</span>Choose Categories
					<span class="chevron"></span>
				</li>
				<li data-target="#step3">
					<span class="badge">2</span>Questions
					<span class="chevron"></span>
				</li>
				<li data-target="#test">
					<span class="badge">3</span>Review
					<span class="chevron"></span>
				</li>
				<li data-target="#step5">
					<span class="badge">4</span>Publish
					<span class="chevron"></span>
				</li>
			</ul>

			<div class="actions">
				<button type="button" class="btn btn-mini btn-prev">
					<i class="icon-arrow-left"></i>Prev
				</button>
				<button type="button" class="btn btn-mini btn-next" data-last="Finish">
					Next
					<i class="icon-arrow-right"></i>
				</button>
			</div>
		</div>

		<div class="step-content">
			<div class="step-pane active" id="step1">

				<form class="form-horizontal">
					<fieldset>
						<div class="form-group">
							<label class="control-label" for="testName">Test Name</label>
							<div class="controls">
								<input class="form-control" id="testName" size="16" type="text">
							</div>
						</div>

						<div class="form-group">
							<label class="control-label" for="testDuration">Duration(Minutes)</label>
							<div class="controls">
								<input class="form-control" id="testDuration" size="16" type="text">
							</div>
						</div>

						<div class="form-group">
							<label class="control-label" for="testDesc">Description
							</label>
							<div class="controls">
								<textarea class="form-control" id="testDesc" rows="15" cols="100"></textarea>
							</div>
						</div>

						<div class="form-group">
							<label class="control-label" for="testInstr">Instructions
							</label>
							<div class="controls">
								<textarea class="form-control" id="testInstr" rows="15" cols="100"></textarea>
							</div>
						</div>

						<div class="form-group">
							<label class="control-label" for="noOfQuestions">No of Questions
							</label>
							<div class="controls">
								<input class="form-control" id="noOfQuestions" size="16" type="text">
							</div>
						</div>

						<div class="form-group">
							<label class="control-label" for="marksPerQuestion">Marks per Question
							</label>
							<div class="controls">
								<input class="form-control" id="marksPerQuestion" size="16" type="text">
							</div>
						</div>

						<div class="form-group">
							<label class="control-label" for="passingMarks">Passing Marks</label>
							<div class="controls">
								<input class="form-control" id="passingMarks" size="16" type="text">
							</div>
						</div>

						<div class="form-group">
							<label class="control-label" for="negMarksPerQuestion">Marks Per Wrong Answer</label>
							<div class="controls">
								<input class="form-control" id="negMarksPerQuestion" size="16" type="text">
							</div>
						</div>


					</fieldset>
				</form>
			</div>

			<div id="step2" class="step-pane"></div>

			<div id="step3" class="step-pane"></div>

			<div id="test" class="step-pane test container"></div>

			<div id="step5" class="step-pane"></div>
		</div>
	</div>
	</div>
</body>

</html>